import { loginAPI, getUserRolePermsAPI } from '@/api/user'
import { setToken, getToken, removeToken } from '@/utils/auth'

export default {
  namespaced: true,
  // 数据状态  响应式
  state: {
    token: getToken() || '', // token
    userProfile: {} // 用户信息
  },
  // 同步修改 Vuex 架构中, 有且只有一种提交 mutation 的方法
  mutations: {
    setToken(state, newToken) {
      // 1. 存入vuex
      state.token = newToken
      // 2. 存入cookie
      setToken(newToken)
    },
    clearUserInfo(state) {
      state.token = ''
      state.userProfile = {}
      removeToken()
    },
    setProfile(state, profile) {
      state.userProfile = profile
    }
  },
  // 异步修改 Vuex 架构中, 有且只有一种异步提交 action 的方法
  // 接口请求 + 提交 mutation
  actions: {
    // 登录接口
    async asyncLogin(ctx, { username, password }) {
      // 1.调用登录接口
      const res = await loginAPI({ username, password })
      // 2.提交 mutation
      ctx.commit('setToken', res.data.token)
    },
    async asyncGetUserRolePerms(ctx) {
      const res = await getUserRolePermsAPI()
      // 2.提交 mutation
      ctx.commit('setProfile', res.data)
      // 这里如果想要当前函数内的数据给到另一个js模块使用
      // 直接把目标数据 return 出去.
      return res.data.permissions
    }
  }
}
// 1. 为什么要使用 Vuex + Cookeis 实现登录功能的状态管理？
// 1.1 Vuex 基于内存的管理方式, 存取非常快, 封装好的方法  使用方便, 刷新就没
// 1.2 Cookeis 基于浏览器的存储方式, 安全性高, 跨域访问, 存储数据量大, 存储数据量大, 存储数据量大
//     基于磁盘, 存取速度略慢, 持久化  刷新不丢失.

// 答：Vuex 是 Vue.js 官方的状态管理模式，它可以集中管理应用的所有状态，并以相应的规则保证状态以一种可预测的方式发生变化。
// Cookeis 是浏览器端存储数据的一种方案，它可以将数据存储在用户的浏览器上，并且可以跨域访问。
// 2. 如何实现登录功能的状态管理？
// 答：Vuex 架构中，有且只有一种提交 mutation 的方法，即 setToken 方法，它可以将 token 存入 Vuex 架构中，并将 token 存入浏览器的 Cookeis 中。
// 3. 登录功能的状态管理是如何实现的？
// 答：在 Vuex 架构中，我们定义了 state 状态，它是一个对象，用于存储登录功能的状态。
// 在 actions 异步提交 mutation 的方法中，我们调用登录接口，并将 token 存入 Vuex 架构中，并将 token 存入浏览器的 Cookeis 中。
// 4. 登录功能的状态管理有什么优点？
// 答：Vuex 架构可以实现状态的集中管理，并且可以保证状态的可预测性。
// Cookeis 可以实现数据的存储，并且可以跨域访问。
// 5. 登录功能的状态管理有什么缺点？
// 答：Vuex 架构的实现比较复杂，需要定义 state、mutations、actions 等。
// Cookeis 的实现比较简单，但是它只能存储字符串类型的数据。
// 6. 登录功能的状态管理有什么优化点？
// 答：可以考虑使用 Vuex 架构的模块化管理，可以更好地实现状态的集中管理。
// 可以考虑使用 Cookeis 的存储方案，可以更好地实现数据的存储。

// 7. 登录功能的状态管理有什么扩展点？
// 答：可以考虑使用 Vuex 架构的插件机制，可以扩展 Vuex 架构的功能。
// 可以考虑使用 Cookeis 的过期时间设置，可以更好地实现数据的过期管理
